<template>
  <div>
    <el-row>
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="员工编号:">
                    <el-input
                      v-model="formData.id"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="司机名称:">
                    <el-input
                      v-model="formData.licensePlate"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属机构:">
                    <el-input
                      v-model="formData.truckTypeName"
                      style="width: 50%"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="电话:">
                    <el-input
                      v-model="formData.allowableVolume"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="年龄:">
                    <el-input
                      v-model="formData.allowableLoad"
                      style="width: 50%"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="驾驶证信息" name="second">
            <el-row>
              <el-form>
                <el-col :span="8">
                  <el-form-item label="驾驶证号：">
                    <el-input style="width: 240px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="准驾车型：">
                    <el-input style="width: 240px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="初次领证日期：">
                    <el-input style="width: 225px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾驶证有效日期：">
                    <el-input style="width: 200px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾龄：">
                    <el-input style="width: 240px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="驾驶证类型：">
                    <el-input style="width: 240px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="从业资格证：">
                    <el-input style="width: 230px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="入场证信息：">
                    <el-input style="width: 240px"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <el-row type="flex" justify="center">
          <el-button size="medium" type="primary">编辑</el-button>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getSijiJiaShiApi, getSijiXinApi } from "@/api/employee";

export default {
  data() {
    return {
      id: this.$route.params.id,
      activeName: "first",
      formData: {},
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  created() {
    this.getXiangqingDateInfo();
  },
  methods: {
    async getXiangqingDateInfo() {
      console.log(this.id);
      const res1 = await getSijiJiaShiApi(this.id);
      const res = await getSijiXinApi(this.id);
      console.log(res1);
      console.log(res);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__active-bar {
  margin-left: 40px;
}
::v-deep .el-tabs--top .el-tabs__item.is-top {
  margin-left: 40px;
}
.el-form {
  ::v-deep .el-form-item__label {
    margin-left: 50px;
    //width: 72px;
  }
  //el-form-item__label
}
::v-deep .el-upload--picture-card {
  margin-left: 50px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  margin-left: 50px;
}
</style>
